<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>购物车首页</title>
		<!-- 引入Bootstraps -->
		<script src="../bootstrap-4.6.1/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../bootstrap-4.6.1/bootstrap.min.css" />
		<script src="../bootstrap-4.6.1/popper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../bootstrap-4.6.1/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入Layui -->
		<script src="../layui-v2.6.8/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../layui-v2.6.8/layui/css/layui.css" />
		<!-- 引入自己 -->
		<link rel="stylesheet" type="text/css" href="../font/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../public/public.css" />
		<link rel="stylesheet" type="text/css" href="../css/cartIndex.css" />
		<link rel="stylesheet" type="text/css" href="../css/shopphead.css" />
		
	</head>
	<body>
		<div id="app">
			<!-- 头部 -->
			<div class="header">
				<!-- 头部导航栏 -->
				<div class="header-nav">
					<!-- 版心 -->
					<div class="main clear">
						<!-- 地图ul -->
						<ul class="map">
							<li class="nav-show">
								<a href="javascript:void(0)" class="icon-a">
									<i class="iconfont">&#xec3f;</i>
									<span class="font">地区</span>
								</a>
								<!-- 国内外地区 -->
								<div class="map-land nav-collapse">
									<div class="item-lists">
										<div class="item">
											<a href="">北京</a>
										</div>
										<div class="item">
											<a href="">北京</a>
										</div>
										<div class="item">
											<a href="">北京</a>
										</div>
										<div class="item">
											<a href="">北京</a>
										</div>
										<div class="item">
											<a href="">北京</a>
										</div>
									</div>
								</div>
							</li>
						</ul>
						<ul class="go-index">
							<!-- 返回首页 -->
							<li>
								<a href="../index.html">
									<i class="iconfont">&#xe600;</i>
									<span class="font">首页</span>
								</a>
							</li>
						</ul>
						<!-- 导航ul -->
						<ul class="nav-r">
							<li>
								<a href="login.html" id="userIndex">你好，请登录</a>
								&nbsp;&nbsp;
								<a href="register.html">免费注册</a>
							</li>
							<li class="spacer"></li>
							<li>
								<a href="">我的订单</a>
							</li>
							<li class="spacer"></li>
							<li class="cw-icon nav-show">
								<a href="">我的京东</a>
								<i class="iconfont">&#xe65f;</i>
								<div class="my-jd nav-collapse">

								</div>
							</li>
							<li class="spacer"></li>
							<li>
								<a href="">京东会员</a>
							</li>
							<li class="spacer"></li>
							<li class="cw-icon  nav-show">
								<a href="">企业采购</a>
								<i class="iconfont">&#xe65f;</i>
								<div class="enterprise nav-collapse">

								</div>
							</li>
							<li class="spacer"></li>
							<li>
								<a href="">客户服务</a>
							</li>
							<li class="spacer"></li>

							<li class="cw-icon  nav-show">
								<a href="">网站导航</a>
								<i class="iconfont">&#xe65f;</i>
								<div class="site-navigation nav-collapse">

								</div>
							</li>
							<li class="spacer"></li>
							<li class="cw-icon  nav-show" id="goaddress">
								<a href="javascript:void(0)">我的地址</a>
								<div class="site-navigation nav-collapse nav-phone">

								</div>
							</li>
							<li class="spacer"></li>
							<li>
								<a href="">网站无障碍</a>
							</li>
						</ul>
					</div>
				</div>
				<!-- 头部logo搜索 -->
				<div class="logo-sea">
					<div class="main">
						<!-- 左边logo -->
						<div class="left-logo">
							<h1>

							</h1>
						</div>
						<!-- 中间搜索 -->
						<div class="center-sea">
							<!-- 顶部搜索 -->
							<div class="search-t">
								<!-- 搜索盒子 -->
								<div class="from-box">
									<input type="text" id="sea-input" value="" />
									<span class="iconfont">
										&#xe663;
									</span>
									<input type="button" id="sea-btn" value="&#xe61e;" class="iconfont" />
								</div>
							</div>
						</div>
					</div>
				</div>
			
			</div>
			<!-- 内容 -->
			<div class="context">
				<div class="main">
					<!-- 购物车body -->
					<div class="cards-body">
						<!-- 购物车头部导航栏 -->
						<div class="cart-headbar">
							<!-- 全部商品 -->
							<div class="all-goods">
								<span><em>全部商品</em></span>
								<span id="ag-count">15</span>
							</div>
							<!-- 配送地址 -->
							<div class="shipping-address">
								<button type="button"
									class="layui-btn layui-btn-primary layui-border-red layui-btn-xs layui-btn-radius"
									id="address">添加地址</button>
								<span>配送至:</span>
								<select name="" id="select-address">
									<option value="">汕尾职业技术学院</option>
								</select>
							</div>
						</div>
						<!-- 全选thead -->
						<div class="cart-thead">
							<!-- 全选 -->
							<div class="column t-checkbox">
								<input type="checkbox" id="chek1">
								<span>全选</span>
							</div>
							<div class="column t-goods">商品</div>
							<div class="column t-props">&nbsp;</div>
							<div class="column t-price">单价</div>
							<div class="column t-quantity">数量</div>
							<div class="column t-sum">小计</div>
							<div class="column t-action">操作</div>
						</div>
						<!-- 购物车商品列表 -->
						<div class="cart-tbodys">
							<div class="cart-tbody">
								<!-- 店名 -->
								<div class="store-name">
									<!-- 全选 -->
									<div class="column ts-checkbox">
										<input type="checkbox">
										<span>店名</span>
									</div>
								</div>
								<!-- 商品具体列表 -->
								<div class="list-item">
									<!-- 商品item -->
									<div class="com-item">
										<!-- 全选 -->
										<div class="column t-checkbox">
											<input type="checkbox" class="chek" checked>
										</div>
										<!-- 商品图片介绍 -->
										<div class="column t-goods">
											<img src="../img/em.png">
											<div>
												豆本豆 黑豆奶 250ml*15盒/箱 礼盒装 2.5g植物蛋白饮料 营养早餐奶
											</div>
										</div>
										<!-- 商品简介 -->
										<div class="column t-props">
											<p>【风味豆奶】黑豆奶15盒</p>
										</div>
										<!-- 价格 -->
										<div class="column t-price">
											<span id="col-price">
												￥1200
											</span>
										</div>
										<!-- 数量 -->
										<div class="column t-quantity">
											<input type="button" class="readd btn" value="-" />
											<input type="text" class="shap-num" value="0" />
											<input type="button" value="+" class="btn add" />
										</div>
										<div class="column t-sum">30</div>
										<div class="column t-action">
											<button type="button" class="btn btn-danger">删除</button>
										</div>
									</div>

								</div>

							</div>
						</div>
						<!-- 购物车底部结算 -->
						<div class="cart-footer">
							<!-- 批量商品操作 -->
							<div class="all-goods">
								<!-- 全选 -->
								<div class="column t-checkbox">
									<input type="checkbox" id="chek2">
									<span>全选</span>
								</div>
								<a href="javascript:void(0)" class="chek-btn">删除选中的商品</a>
								<a href="javascript:void(0)" class="clearCar">清理购物车</a>
							</div>
							<!-- 配送地址 -->
							<div class="shipping-address">
								<span>已选择:<em id="chek-num">0</em>件商品</span>
								<span>总价：<em id="shapping-num">￥0</em></span>
								<button type="button" class="btn btn-danger" id="go-settlement">去结算</button>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 尾部 -->
			<div class="footer" id="footer">
				<div class="main">
					
				</div>
			</div>
	</body>
	<script src="../public/public.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/cartIndex.js" type="text/javascript" charset="utf-8"></script>
</html>
